<template>
    <div>
        <div class="title">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                <span>查验情况</span>
            </div>
            <div class="right">
                <div class="tabBtn" :class="active == 'inspection' ? 'actived' : ''" @click="Dinspection">
                    查验率
                </div>
                <div class="tabBtn" :class="active == 'seized' ? 'actived' : ''" @click="Dseized">查获率</div>
            </div>
        </div>

        <div class="checkSituationView" id="checkSituationView" ref="checkSituationView" style="width:100%;height:210px"></div>

    </div>
</template>

<script>
import echarts from 'echarts'
import { decrypt } from '@/utils/AES.js'
import { reqFindInspectionRateQY, reqFindCaptureRateQY } from '@/api/home/index.js'
export default {
    data(){
        return {
            active: 'inspection',
            list: [],          
        }
    },
    mounted() {
        
        this.$nextTick(() => {
            this.initChart();
        });
    },
    watch: {
      
        list: {
            deep: true,
            handler(val) {
                this.setOptions(val);
            }
        },
      
        $route:{
            handler(val){
                if (val.path == '/visual/thirdView/basicFileMap') {
                    this.getList()
                }else {
                    return
                }
            },
            deep:true
        }
    },
    created() {
        this.getList()
    },
    methods:{
        async Dseized() {
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.active = 'seized'
            const res = await reqFindCaptureRateQY({ tradeCo: query.tradeCo})
         
            this.list = res.data
            
            this.chart.hideLoading();
        },
        async Dinspection() {
            let query = JSON.parse(decrypt(this.$route.query.key))
            this.active = 'inspection'
            const res = await reqFindInspectionRateQY({ tradeCo: query.tradeCo })
          
            this.list = res.data
           

           
            this.chart.hideLoading();
        },
        // 查验率
        async getList() {
            let query = JSON.parse(decrypt(this.$route.query.key))
            const res = await reqFindInspectionRateQY({ tradeCo: query.tradeCo})

           
            this.list = res.data
          
            this.chart.hideLoading();
        },

        initChart() {
            this.chart = echarts.init(document.getElementById('checkSituationView'), null, { renderer: 'svg' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.list,this.list2);
        },
        setOptions(list) {


            let monthList = list.map(item => {
                return item.month1
            })
            let newMonthList = Array.from(new Set(monthList))
            // 进口
            const dataList = list.filter(item => {
                return item.ieFlag == 'I'
            })
            const jinkouList = dataList.map(item => {
                return +item.toCYL
            })
            // 出口
            const dataList2 = list.filter(item => {
                return item.ieFlag == 'E'
            })
            const chukouList = dataList2.map(item => {
                return +item.toCYL
            })
            // console.log('sdsds', list);
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: list.length > 0 ,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                backgroundColor: "",
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // type: "shadow",
                    },
                },
                legend: {
                    show: list.length > 0,
                    data: ["进口", "出口"],
                    // align: "right",
                    right: 15,
                    textStyle: {
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20,
                },
                grid: {
                    top: '20%',
                    left: "3%",
                    right: "6%",
                    bottom: "1%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        name: list.length > 0?'月份':'',
                        nameGap: 1,
                        // nameLocation:'middle',
                        nameTextStyle: {
                            color: '#fff'
                        },
                        type: "category",
                        data: newMonthList,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#063374",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: list.length > 0?'单位：%':'',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "出口",
                        type: "line",
                        symbol: "none",
                        smooth: true,
                        // stack: 'Total',
                        data: chukouList,
                        barWidth: 10, //柱子宽度
                        barGap: 0.5, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color:'rgba(0,244,255,1)',
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                //     {
                                //         offset: 0,
                                //         color: "rgba(0,244,255,1)",
                                //     },
                                //     {
                                //         offset: 1,
                                //         color: "rgba(0,77,167,1)",
                                //     },
                                // ]),
                                barBorderRadius: [5, 5, 0, 0],
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "进口",
                        type: "line",
                        symbol: "none",
                        smooth: true,
                        // stack: 'Total',
                        data: jinkouList,
                        barWidth: 10,
                        barGap: 0.5,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#ff8100",

                                    },
                                    {
                                        offset: 1,
                                        color: "#ff4d00",
                                    },
                                ]),
                                barBorderRadius: [5, 5, 0, 0],
                                opacity: 1,
                            },
                        },
                    },

                ],
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    height: 40px;
    display: flex;

    .left {
        width: 500px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }
         .right {
             flex: 1;
             display: flex;
             align-items: center;
             justify-content: center;
             color: rgba(255, 255, 255, 0.53);
    
             .tabBtn {
                 width: 60px;
                 height: 25px;
                 font-size: 14px;
                 border: 1px solid transparent;
                 margin-left: 5px;
                 line-height: 24px;
                 border-radius: 5px;
                 cursor: pointer;
                 text-align: center;
             }
    
             .actived {
                 border: 1px solid #00c1ff;
                 color: #00c1ff;
             }
    
         }
}
</style>